<template>
	<div class="story-list">
		<h3>story list</h3>
		<waterfall :line-gap="200" :watch="st_list">
			<waterfall-slot
				v-for="(item, index) in st_list"
				:width="100"
				:height="100"
				:order="index"
				:key="index"
			>
				<router-link 
				:to="'/chapter-index/'+item.head" 
				:key="index" 
				class="story-card"
				>
					<h3>{{item.title}}</h3>
					<p>{{item.brief}}</p>
				</router-link>
			</waterfall-slot>
		</waterfall>
		<el-button type="primary" @click="createStory">添加小说</el-button>
	</div>
</template>

<script>
import * as web3CTR from '@/utils/web3-ctr'
import Waterfall from 'vue-waterfall/lib/waterfall'
import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'

export default {
	name: 'story-list',
	data(){
		return{
			slist:[],
			st_list:[]
		}
	},
	components: {
		Waterfall,
		WaterfallSlot
	},
	mounted(){
		// this.getStoryList()
		console.log("mounted xx")

		web3CTR.storyTest().then((data)=>{
			console.log(data,"storyTest")
		})
	},
	methods:{
		getStoryList(){
			web3CTR.storyList().then((res)=>{
				console.log("slist: ",this.slist)
				this.slist = res
				// this.getStoryDetail()
			})
		},
		async createStory(){
			this.$router.push({
				name: 'add-story'
			})
		},
		getStoryDetail(){
			let list = []
			this.slist.forEach((item)=>{
				web3CTR.storyDetail(item.head).then((data)=>{
					list.push({
						title: data[0],//标题
						brief: data[1],//简介
						score: data[2], //星级
						head: item.head //
					})
				})
			})
			console.log("st_list", list)
			this.st_list = list
		}
	}
}
</script>
<style lang="stylus" scoped>
.story-card{
}
</style>
